<template>
  <div>
    <!--  2018/6/5 zhangQ -->
    <Tabs v-model="tabs">
      <TabPane label="基本信息" name="1"></TabPane>
      <TabPane label="权限分配" name="2"></TabPane>
    </Tabs>
    <div v-show="+tabs==1">

      <Form :model="xlUser" autocomplete="new-password">
        <FormItem label="用户名" @submit.native.prevent>
          <i-input type="text" v-model="xlUser.loginName" autocomplete="new-password">
            <Icon type="ios-person-outline" slot="prepend"></Icon>
          </i-input>
        </FormItem>
        <FormItem label="密码">
          <i-input type="text" v-model="xlUser.pwd" autocomplete="new-password">
            <Icon type="ios-locked-outline" slot="prepend"></Icon>
          </i-input>
        </FormItem>
        <FormItem prop="mobile" label="电话">
          <i-input type="text" v-model="xlUser.mobile" placeholder="mobile">
            <Icon type="android-phone-portrait" slot="prepend"></Icon>
          </i-input>
        </FormItem>

        <FormItem prop="mail" label="邮箱">
          <i-input type="text" v-model="xlUser.email" placeholder="email">
            <Icon type="ios-at" slot="prepend"></Icon>
          </i-input>
        </FormItem>
        <FormItem prop="realName" label="真实姓名">
          <i-input type="text" v-model="xlUser.realName">
            <Icon type="ios-person-outline" slot="prepend"></Icon>
          </i-input>
        </FormItem>

      </Form>
    </div>

    <div v-show="+tabs==2">
      <powerEdit ref='powerEdit' v-if="powerEditShow" :powerList="currentUser.permission" :subUserPowerList="subUserPowerList"></powerEdit>
    </div>
    <div class="xlinkModal-footer">
      <Button type="info" @click="addXlUser">确认添加</Button>
    </div>

  </div>
</template>

<script>
  import _ from 'lodash'
  import {querySubUserPowerList, saveSubUser} from '@/api/backEnd/subUer'
  import powerEdit from './powerEdit'
  import {mapGetters} from 'vuex'

  export default {
    name: 'addSubUser',
    data () {
      let tabs = '1'
      let xlUser = _.cloneDeep(this.subUser)
      xlUser.pwd = ''
      // 子用户的权限列表
      let subUserPowerList = []
      let powerEditShow = false
      let datas = {xlUser, tabs, subUserPowerList, powerEditShow}
      return datas
    },
    props: {
      subUser: {
        type: Object,
        default () {
          return {}
        }
      }
    },
    computed: {
      ...mapGetters(['currentUser'])
    },
    methods: {
      /**
       * TODO(添加对象)
       * @auther zhangQ
       * @date 2018/6/5 12:58
       */
      addXlUser () {
        let powerIds = this.$refs['powerEdit'].getSelectPower()
        let subUserPowers = []
        let userId = ''
        if (this.xlUser.id) {
          userId = this.xlUser.id
        }
        powerIds.forEach((item) => {
          subUserPowers.push({userId: userId, powerId: item})
        })
        let resUser = Object.assign({}, this.xlUser)
        resUser.money = 0.00
        resUser.parentId = this.currentUser.userId
        saveSubUser({user: resUser, powerList: subUserPowers}).then((res) => {
          if (+res.data.isSuccess === 1) {
            this.$Notice.success({
              title: '保存成功'
            })
            this.$emit('close')
          } else {
            this.$Notice.error({
              title: '保存失败',
              desc: res.data.res
            })
          }
        })
        // console.log('addXlUser', this.xlUser)
      }
    },
    created () {
    },
    mounted () {
      if (this.xlUser.id) {
        querySubUserPowerList({userId: this.xlUser.id}).then((res) => {
          if (+res.data.isSuccess === 1) {
            this.subUserPowerList = res.data.data
          }
          this.powerEditShow = true
        })
      } else {
        this.powerEditShow = true
      }
    },
    components: {powerEdit}
  }
</script>

<style scoped>

</style>
